<template>
  <view class="main" v-if="info">
    <view class="detailItem topBox">
      <image :src="imgList[info.STATUS]" alt=""></image>
      <view class="topMsg">
        <h3 :class="topColor[info.STATUS]">{{ info.STATUS }}</h3>
        <p>
          {{ topMsg[info.STATUS] }}
        </p>
      </view>
    </view>
    <view class="detailItem">
      <nut-steps direction="vertical" progress-dot current="2">
        <nut-step title="始发地" :content="info.SHIPPERCITY">1</nut-step>
        <nut-step title="目的地" :content="info.RECEIVERCITY">2</nut-step>
      </nut-steps>
    </view>
    <view class="detailItem orderMsg">
      <h3>订单信息</h3>
      <view class="orderItem">
        <p>货物信息</p>
        <view>{{
          info.CARGONAME +
          "，" +
          info.WEIGHT +
          "Kg，" +
          info.VOLUME +
          "m³，" +
          info.QUANTITY +
          "件"
        }}</view>
      </view>
      <view class="orderItem">
        <p>接货方式</p>
        <view>{{ info.IS_MAKECARGO }}</view> </view
      ><view class="orderItem">
        <p>提货方式</p>
        <view>{{ info.PICKUPMODE }}</view> </view
      ><view class="orderItem">
        <p>承运单号</p>
        <view>{{ info.PTASKNO }}</view>
      </view>
      <view class="orderItem">
        <p>下单时间</p>
        <view>{{ info.STRINPUTTIME }}</view>
      </view>
    </view>
    <view class="detailItem branchMsg" v-if="info.STATUS == '前往接货'">
      <h3>车辆信息</h3>
      <view class="branchMain">
        <image
          src="../../assets/images/index/我的订单/querendingdan_icon_2.png"
          alt=""
        ></image>
        <view class="branchMid">
          <h4 v-if="info.VEHICLE">{{ info.VEHICLE }}</h4>
          <p v-if="info.DRIVERMOBILE">电话：{{ info.DRIVERMOBILE }}</p>
        </view>
        <image
          class="phone"
          src="../../assets/images/index/我的订单/dingdanxiangqing_icon_bodadiahua.png"
          alt=""
        ></image>
      </view>
    </view>
    <view class="detailItem branchMsg">
      <h3>网点信息</h3>
      <view class="branchMain">
        <image
          src="../../assets/images/index/我的订单/dingdanxiangqing_icon_daodawangdian.png"
          alt=""
        ></image>
        <view class="branchMid">
          <h4>{{ info.DESCOMPANY }}</h4>
          <p>地址：{{ info.ADDRESS }}</p>
          <p>电话：{{ info.TEL }}</p>
        </view>
        <image
          class="phone"
          src="../../assets/images/index/我的订单/dingdanxiangqing_icon_bodadiahua.png"
          alt=""
        ></image>
      </view>
    </view>
    <view class="bottomBox">
      <nut-button
        color="#0966FF"
        size="large"
        type="primary"
        @click="gotoWaybillTracking"
        >运单追踪</nut-button
      >
    </view>
    <!-- 提示弹框 -->
    <nut-notify v-model:visible="notiShow" msg="暂无运单信息" />
  </view>
</template>
<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { $post } from "../../@api/index";
import {
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  render,
} from "vue";
import useMyOrderStore from "../../store/myOrder";
const store = useMyOrderStore();
const info = ref();
const notiShow = ref(false);
getOrderDetail();

enum imgList {
  待处理 = "../../assets/images/index/我的订单/dingdanxiangqing_icon_daijiedan.png",
  等待派车 = "../../assets/images/index/我的订单/dingdanxiangqing_icon_daijiedan.png",
  前往接货 = "../../assets/images/index/我的订单/dingdanxiangqing_icon_daijiedan.png",
  接单成功 = "../../assets/images/index/我的订单/dingdanxiangqing_icon_daijiedan.png",
  运输中 = "../../assets/images/index/我的订单/dingdanxiangqing_icon_yunshuzhong.png",
  待签收 = "../../assets/images/index/我的订单/dingdanxiangqing_icon_daiqianshou1.png",
  已完成 = "../../assets/images/index/我的订单/dingdanxiangqing_icon_yiwancheng.png",
  撤销 = "../../assets/images/index/我的订单/chexiao.png",
}
enum topMsg {
  待处理 = "等待处理中，将尽快为您安排处理",
  等待派车 = "已转单，等待派车中",
  前往接货 = "已派车，前往接货中",
  接单成功 = "等待处理中，将尽快为您安排处理",
  运输中 = "货物正在运输中，请您耐心等待",
  待签收 = "货物已到达，等待您的签收",
  已完成 = "该运单已经完成，感谢您的使用",
  撤销 = "该运单已经撤销，期待您下次光临",
}
enum topColor {
  待处理 = "c0966FF",
  等待派车 = "c0966FF",
  前往接货 = "c0966FF",
  接单成功 = "c0966FF",
  运输中 = "c09A3F2",
  待签收 = "cFF9200",
  已完成 = "c07C160",
  撤销 = "c666666",
}
async function getOrderDetail() {
  let res = await $post<{ arr: string }>("/myOrders/getpoorderdetails", {
    openId: "oN9cn09rkm0cceEHq1VUfCd4LP4k",
    ptaskno: store.ptaskno,
  });
  info.value = JSON.parse(res.data.arr)[0];
  console.log(info.value);
}

async function gotoWaybillTracking() {
  if (
    info.value.V11 == "" ||
    info.value.V11 == undefined ||
    info.value.V11 == null ||
    info.value.V11 == " "
  ) {
    notiShow.value = true;
  } else {
    let res = await $post<any>("/order/orderTrackInfo", {
      openId: "oN9cn09rkm0cceEHq1VUfCd4LP4k",
      orderid: info.value.V11,
    });
    console.log(res);

    if (res.data.data.length > 0) {
      store.trackingList = res.data.data[0];
      Taro.navigateTo({
        url: "/pages/myOrder/waybillTracking",
      });
    } else {
      notiShow.value = true;
    }
  }
}
</script>
<style lang="less">
.c0966FF {
  color: #0966ff;
}
.c09A3F2 {
  color: #09a3f2;
}
.cFF9200 {
  color: #ff9200;
}
.c07C160 {
  color: #07c160;
}
.c666666 {
  color: #666666;
}
.main {
  width: 100%;
  height: 100%;
  padding: 0 24rpx;
  background: rgb(228, 228, 228);
  box-sizing: border-box;
  padding-top: 1rpx;
  .nut-step-title {
    color: #999999 !important;
    font-size: 24rpx;
    margin-bottom: 0 !important;
  }
  .nut-step-content {
    color: #252525 !important;
    font-size: 28rpx;
    font-weight: 600;
  }
  .nut-steps-vertical.nut-steps-dot .nut-step-finish .nut-step-icon {
    background: #0966ff !important;
  }
  .nut-steps-vertical.nut-steps-dot .nut-step-process .nut-step-icon {
    background: #08bf60 !important;
  }
  .nut-step.nut-step-finish .nut-step-line {
    background: #999999 !important;
  }
  .detailItem {
    margin-top: 16rpx;
    padding: 32rpx;
    width: 100%;
    border-radius: 16rpx;
    background: white;
    box-sizing: border-box;
  }
  .branchMsg {
    h3 {
      font-size: 32rpx;
      font-weight: 600;
      line-height: 60rpx;
      height: 80rpx;
      border-bottom: 1rpx solid #e5e5e5;
      margin-bottom: 30rpx;
    }
    .branchMain {
      display: flex;
      justify-content: space-between;
      .branchMid {
        flex: 1;
        margin-left: 24rpx;
      }
      image {
        height: 112rpx;
        width: 112rpx;
      }
      h4 {
        font-size: 28rpx;
      }
      p {
        font-size: 22rpx;
        color: #666666;
        width: 440rpx;
        overflow: hidden;
        text-overflow: ellipsis; //文本溢出显示省略号
        white-space: nowrap; //文本不会换行
      }
      .phone {
        height: 48rpx;
        width: 48rpx;
        margin-top: 32rpx;
      }
    }
  }
  .orderMsg {
    h3 {
      font-size: 32rpx;
      font-weight: 600;
      line-height: 60rpx;
      height: 80rpx;
      border-bottom: 1rpx solid #e5e5e5;
      margin-bottom: 20rpx;
    }
    .orderItem {
      display: flex;
      font-size: 28rpx;
      line-height: 60rpx;
      p {
        color: #999999;
      }
      view {
        margin-left: 32rpx;
      }
    }
  }
  .topBox {
    display: flex;
    image {
      height: 84rpx;
      width: 84rpx;
    }
    .topMsg {
      margin-left: 24rpx;
      h3 {
        font-size: 32rpx;
        // color: #0966ff;
      }
      p {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
  .bottomBox {
    margin-top: 40rpx;
    height: 120rpx;
  }
}
</style>
